<template>
  <div class="app-container">
    <div class="content-box">

      <!-- 头部最大图 -->
      <div class="header-img">
        <a-image src="https://www.reiss.com/cms/resource/blob/509060/bc485f829a4f579660c2c2f10c3cb6cf/1-min-9-data.jpg" :preview="false"/>
      </div>

      <!-- 历史文字说明 -->
      <div class="fashion-box">
          <h1 style="font-weight: 700;">Since its creation in 1971, FRSST has established a design philosophy centred on creating modern menswear, womenswear, accessories, and childrenswear that transcends time and trends.
          </h1>

          <h1 style="font-weight: 700;margin-top: 20px;">With a London in-house atelier and a design team dedicated to delivering pieces that continuously embody its legacy, FRSST today operates as a modern fashion house, offering attainable-luxury collections of unwavering elegance.
            Throughout five decades, FRSST has established a unique style vocabulary - and conquered a loyal following of discerning individuals, stylish celebrities, and Royalty.</h1>

          <h1 style="font-weight: 700;">'This Is Our Story' tells the story and highlights of the brand from 1971 to the present day.</h1>
      </div>

      <!-- 时间图 -->
      <div class="time-img">
        <a-image
      
          src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250507110609/20250507110609_681ace21956f8.webp" :preview="false"
          alt="image" />
          <a-image
          src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250507110648/20250507110648_681ace488c83c.webp" :preview="false"
          alt="image" />
      </div>

      <!-- 多元化与包容性声明 -->
      <div class="our-values">
        <div class="our-values-title">
          DIVERSITY & INCLUSION STATEMENT.
        </div>
        <div class="our-values-content">
          <div class="our-values-content-left">
            <a-image
              src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250507102833/20250507102833_681ac551cebc0.webp" :preview="false"
              alt="image" />
          </div>
          <div class="our-values-content-right">
            <a-image
              src="https://www.reiss.com/cms/resource/blob/509034/d3f1b95b45394bc7af4ecf226be388f7/3-3-min-data.jpg" :preview="false"
              alt="image" />
          </div>
        </div>
      </div>

      <div class="shipping">
        <a-image
              src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250507102929/20250507102929_681ac589e1bff.webp" :preview="false"
              alt="image" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  // padding: 0 30px;
}

.content-box {
  margin: 40px auto;
  width: 100%;
}

.header-img {
  position: relative;
  width: 100%;
  overflow: hidden;

  :deep(.ant-image) {
    width: 100%;
    
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}

.fashion-box {
  width: 50%;
  padding: 60px 0;
  margin: 0 auto;
  color: #000000;
}
.time-img{
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.content {
  margin-top: 40px;
  line-height: 1.5;
  font-size: 28px;
  color: #212529;
}

.our-values {
  width: 100%;
}

.our-values-title {
  font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
  padding: 20px 0px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.our-values-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.our-values-content-left {
  width: calc(50% - 20px);
  text-align: right;
  color: #212529;
  position: relative;
  overflow: hidden;

  :deep(.ant-image) {
    width: 100%;
    
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}

.our-values-content-right {
  width: 50%;
  position: relative;
  overflow: hidden;

  :deep(.ant-image) {
    width: 100%;
    
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}


.shipping {
  width:100%;
  margin-top:20px;
  position: relative;
  overflow: hidden;

  :deep(.ant-image) {
    width: 100%;
    
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}


</style>
